
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        canvas.width=800;
        canvas.height=800;

         context.lineWidth=50;
         context.strokeStyle="#058";

         context.beginPath();
         context.moveTo(100,200);
         context.lineTo(700,200);
         context.lineCap="butt";
         context.stroke();

        context.beginPath();
        context.moveTo(100,400);
        context.lineTo(700,400);
        context.lineCap="round";
        context.stroke();

        context.beginPath();
        context.moveTo(100,600);
        context.lineTo(700,600);
        context.lineCap="square";
        context.stroke();

        //baseline
        context.lineWidth=1;
        context.strokeStyle="#27a";

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(100,700);
        context.moveTo(700,100);
        context.lineTo(700,700);
        context.stroke();




    }
</script>
</body>
</html>